import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card, Icon, List,Avatar,Button ,Tag,Spin} from 'antd';
import styles from './index.less';

import docCookies from "../../../common/DocCookies";


@connect(state => ({
  discuss: state.discuss,
}))
class ShowDiscuss extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    loading: true,          //list的loading
    loadingMore: false,     //点击加载按钮的loading
    showLoadingMore: true,  //是否显示加载更多按钮判断
    data: [],
  };
  /**
   * 初始化渲染后触发 整个过程只调用一次
   */
  componentDidMount() {
    this.getData((response) => {
      const data = response.data.list;
      this.setState({
        loading: false,
        data: data,
      });
    });
  }

  /**
   * 当props状态改变时调用
   * @param nextProps
   */
  componentWillReceiveProps(nextProps){
    if(nextProps.reloadDiscuss !== undefined && nextProps.reloadDiscuss != this.props.reloadDiscuss && nextProps.reloadDiscuss == true){
      this.setState({
        pageNo:1,
        loading: true,
      },() => {
        this.getData((response) => {
          const data = response.data.list;
          this.setState({
            loading: false,
            data: data,
          });
        });
      })
    }
  }

  /**
   * 加载电台秀评论数据
   * @param loadCallBack
   */
  getData = (loadCallBack) => {
    var self = this;
    const { dispatch,showId } = self.props;
    const pageNo = self.state.pageNo ;
    const pageSize = self.state.pageSize ;
    // 需要传递的参数信息
    const params = {
      showId:showId,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    dispatch({
      type: 'discuss/listShowDiscuss',  //请求的action
      payload:params,
      callback:(response) =>{
        loadCallBack(response);
        self.setState({
          showLoadingMore:response.data.pageNo == response.data.pageCount ? false:true,
        });
      }
    });
  }

  /**
   * 点击加载更多加载数据,注意这个setState是异步的
   */
  onLoadMore = () => {
    var self =this;
    const pageNo = this.state.pageNo +1;
    self.setState({
      pageNo:pageNo,
      loadingMore: true,
    } ,()=>{
      self.getData((response) => {
        const data = self.state.data.concat(response.data.list);
        self.setState({
          data:data,
          loadingMore: false,
        }, () => {
          window.dispatchEvent(new Event('resize'));
        });
      });
    });
  }
  /**
   * 删除电台秀平论
   * @param discussId
   * @param index
   */
  handleDelShowDiscuss= (discussId,index,showIndex) => {
    var self = this;
    const { dispatch } = self.props;
    // 需要传递的参数信息
    const params = {
      discussId:discussId,
    };
    dispatch({
      type: 'discuss/delShowDiscuss',  //请求的action
      payload:params,
      callback:(response) =>{
        const resultData = self.state.data;
        resultData.splice(index,1);
        self.setState({
          data:resultData.concat([]),
        });
        self.props.afterDelShowDiscuss(showIndex);
      }
    });
  }
  /**
   * 审核电台秀平论
   * @param discussId
   * @param index
   */
  handleAuditShowDiscuss= (discussId,index) => {
    var self = this;
    const { dispatch } = self.props;
    // 需要传递的参数信息
    const params = {
      discussId:discussId,
      reviewStatus:1,
    };
    dispatch({
      type: 'discuss/updateShowDiscussReviewStatus',  //请求的action
      payload:params,
      callback:(response) =>{
        var resultData = self.state.data;
        resultData[index].reviewStatus = 1;
        self.setState({
          data:resultData.concat([]),
        });
      }
    });
  }
  render() {
    const { loading,loadingMore,showLoadingMore,data} = this.state;
    const {showReviewPermissions,showIndex}  = this.props;

    const loadMore = showLoadingMore ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore && <Spin />}
        {!loadingMore && <Button onClick={() => this.onLoadMore() }>加载更多....</Button>}
      </div>
    ) : null;

    return (
      <div >
        <List
          style={{ backgroundColor:"#ffffff",borderColor:"#e8e8e8",borderStyle:'solid',borderWidth:1,borderTop:'none'}}
          itemLayout="horizontal"
          className={styles.discussList}
          loading={loading}
          dataSource={data}
          loadMore={loadMore}
          renderItem={(item,index) => (
            <List.Item style={{ borderBottomWidth:1,borderBottomColor:"#e8e8e8",borderBottomStyle:'solid',width:580,marginRight:'auto',marginLeft:'auto',marginBottom:0,marginTop:0 }}>
              <List.Item.Meta
                avatar={<Avatar  shape="square"  src={item.headImgUrl} />}
                title={<div><a style={{color:"#32a2d5"}}>{item.nickName}</a><span>:</span><span style={{wordBreak:"break-all"}}>{item.commentContent}</span> </div>}
                description={
                  <div>
                    <div  style={{float:"left",marginLeft:5}} >
                      {item.commentTime}
                    </div>
                    <div  style={{float:"right",marginRight:5}}>
                      {showReviewPermissions == 1 ?  ( item.reviewStatus == 1 ? <a>已公开</a> : <a onClick={() => this.handleAuditShowDiscuss(item.id,index)} >审核</a> )  : "" } <a style={{marginLeft:10}} onClick={()=>this.handleDelShowDiscuss(item.id,index,showIndex)} >删除</a>
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default ShowDiscuss;
